<style>
    .game{
        background-color: #F9F9F9;
        border: 1px solid #D0D0D0;
        color: #002166;
        display: block;
        margin: 14px 0 14px 0;
        padding: 12px 10px 12px 10px;
        width: 520px;
        overflow: auto;
    }
    .game .card{
        width: 120px;
        height: 120px;
        display: block;
        background: #d4d4d4;
        float:left;
        margin: 5px;
        cursor: pointer;
        overflow: hidden;
        border-radius: 3px;
    }
    .game .card img{
        width: 120px;
        height: 120px;
    }
    .game .card .text{
        padding: 5px;
        font-weight: bold;
        padding-top: 45px;
        text-align:center;
        font-size: 14px;
    }
    .game .card:hover{
        background: #d0d0d0;
    }
    .game .description{
        height: 50px;
        background: #d0d0d0;
        width: 520px;
    }
    .game .hide{
        display: none;
    }
    .game .show{
        display: block;
    }
    .game .right{
        display: block !important;
    }
    .game .info{
        border: 1px solid lavender;
        margin: 5px;
        padding: 5px;
        color: blue;
        font-weight: bold;
        overflow: auto;
    }
</style>
<script>
    function encrease_click(){
        var i=$(".clicks").html();
        i=i*1+1;
        $(".clicks").html(i);
    }
    
    setInterval('stick()', 1000 );
    
    function onClickCard(o){
        
        var lst=$('.game .show');
        //alert(lst.length);
        encrease_click();
        if(lst.length<2){
            
            $(o).find('.mask').attr("class","mask show");
            var lst=$('.game .show');
            if(lst.length==2){
                if($(lst[0]).find(".id").attr("value")==$(lst[1]).find(".id").attr("value")){
                    alert("You Right");
                    $(lst).attr("class","right");
                }
            }
            
        }
        else{
            $('.game .mask').attr("class","mask hide");
            $(o).find('.mask').attr("class","mask show");
            
        }
        if($(".mask").length==0){
            alert('You Win');
            setInterval(null, 1000 );
        }  
    }
    
    function stick(){
        hh=$(".hh").html()*1;
        mm=$(".mm").html()*1;
        ss=$(".ss").html()*1;
        if(ss<59)
            ss++;
        else{
            ss=0;
            if(mm<59)
                mm++;
            else
                hh++;
        }
        if(hh>10)
            $(".hh").html(hh);
        else
            $(".hh").html('0'+hh);
        if(mm>10)
            $(".mm").html(mm);
        else
            $(".mm").html('0'+mm);
        if(ss>10)
            $(".ss").html(ss);
        else
            $(".ss").html('0'+ss);
        
    }
    
</script>

<div class="game">
    <div class="info">
        <div style="float: left;">
            Clicks: <span class="clicks">0</span><br />
            Time: <span class="hh">00</span>:<span class="mm">00</span>:<span class="ss">00</span>
        </div>
        <div style="float: right;">
            <img src=""/>
        </div>
    </div>
    <?php foreach($words as $word){
        //var_dump($word);
        ?>
        <div class="card" onclick="onClickCard(this)">
        <div class="mask hide">
            <input type="hidden" class="id" value="<?php echo $word['id']?>"/>
            <?php if(isset($word['key'])){
                ?>
                
            <div class="text"><?php echo $word['key']?></div>
            <?php
            }
            ?>
            
            <?php if(isset($word['value'])){
                ?>
                
            <div class="text<?php if(isset($word['image']) && $word['image']!='')
                echo " hide";
                ?>" 
            
            ><?php echo $word['value']?></div>
            <?php
            }
            ?>
            
            <?php if(isset($word['image'])  && $word['image']!=''){
                ?>
                
            <img src='<?php echo $word['image']?>'/>
            <?php
            }
            ?>
            
        </div>
        </div>
        <?php
    }?>
</div>
